import React from 'react';
import { Spin } from 'antd';
import { inject, observer } from 'mobx-react';
import { WeaLeftRightLayout } from 'ecCom';
import ItemList from "./ItemList";
import TaskAccCard from './TaskAccCard';
import ListLeftTree from '../governTree';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@inject("taskAccountStore")
@observer
class TaskAccount extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { taskAccountStore } = this.props;
        taskAccountStore.initList();
        taskAccountStore.getIsTreeShow();
    }

    componentWillReceiveProps(nextProps) {
        const keyOld = this.props.location.key;
        const keyNew = nextProps.location.key;
        if (keyOld !== keyNew) {
            const { taskAccountStore } = nextProps;
            taskAccountStore.initList();
            taskAccountStore.getIsTreeShow();
        }
    }

    render() {
        const { taskAccountStore } = this.props;
        const { showMid, onCollapse,isTreeShow } = taskAccountStore;
        
        return (
            <div className="prj-board-page">
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@ctmk73`}
                    isNew={true}
                    col={3}
                    leftWidth={255}
                    showLeft = {isTreeShow}
                    leftCom={<ListLeftTree ecId={`${this && this.props && this.props.ecId || ''}_ListLeftTree@5sanux`} title={getLabel('388808', "督办类型")} treeStore={taskAccountStore} />}
                    midWidth={320}
                    midCom={(<ItemList ecId={`${this && this.props && this.props.ecId || ''}_ItemList@t29b57`} title={getLabel(508058, "督办事项")} store={taskAccountStore} />)}
                    showMid={showMid}
                    onCollapse={(side, bool) => { onCollapse(side, bool) }}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@jkf4uc`} spinning={taskAccountStore.prjListloading} >
                        <TaskAccCard ecId={`${this && this.props && this.props.ecId || ''}_TaskAccCard@o0q8kx`} store={taskAccountStore} />
                    </Spin>
                </WeaLeftRightLayout>

            </div>
        )
    }
}

export default TaskAccount;